<template>
  <div>
    <i-radio-group
      v-model="courseType"
      type="button"
      v-show="type === 'created'"
      style="margin-bottom:10px"
    >
      <i-radio :label="null">不限</i-radio>
      <i-radio :label="0">校内课程</i-radio>
      <i-radio :label="1">新闻动态</i-radio>
    </i-radio-group>
    <i-row :gutter="10">
      <i-col
        :md="6"
        :sm="8"
        :xs="12"
        v-for="(item, index) in courses"
        v-bind:key="'manage_course_' + index"
      >
        <course-item :data="item" :editable="true"></course-item>
      </i-col>
    </i-row>
    <i-page
      style="text-align:center;"
      v-show="total"
      :total="total"
      :page-size="12"
      :current="page"
      size="small"
      @on-change="search"
      show-total
      show-elevator
    ></i-page>
    <i-card
      dis-hover
      v-show="!total"
      style="min-height:300px;text-align: center;padding-top:100px;"
    >暂无课程</i-card>
  </div>
</template>

<script>
import CourseItem from '../components/course-item'
import { mapGetters } from 'vuex'
export default {
  components: {
    CourseItem
  },
  data() {
    return {
      courses: [],
      total: 0,
      type: 'created',
      page: 1,
      courseType: null
    }
  },
  watch: {
    courseType() {
      this.search()
    }
  },
  computed: {
    ...mapGetters({
      account: 'account'
    })
  },
  methods: {
    search(page) {
      page = page || 1
      const that = this
      let url = '/vts/course/my'
      let action = null
      switch (this.type) {
        case 'created':
          url = '/vts/course/created'
          break
        case 'viewed':
          action = 'BrowseCourse'
          break
        case 'favored':
          action = 'FavorCourse'
          break
        case 'downloaded':
          action = 'DownloadCourse'
          break
        default:
          url = null
          break
      }
      if (url === null) {
        this.$router.push({ path: '/' })
        return
      }

      this.$emit('loaded', this.$route.path)
      this.$http({
        method: 'POST',
        url: url,
        data: {
          page: page,
          eventType: action,
          type: this.courseType
        }
      }).then(response => {
        const data = response.data
        that.courses = data.data
        that.total = data.total
      })
    }
  },
  activated() {
    const type = this.$route.params.type
    if (type === 'created' && this.account.role !== 1) {
      this.$router.push({ path: '/manage/courses/viewed' })
      return
    }
    this.type = type
    this.search()
  }
}
</script>

<style>
</style>
